import React from 'react'
import { useState, useEffect } from 'react'
import styles from './index.module.less'
// import { plantXWLog } from '@util/fun'

export default function Reading(props: { uuid: string; setChecked: (checked: boolean) => void }) {
  const [isCheck, setIsCheck] = useState(false)

  useEffect(() => {
    props.setChecked(isCheck)
  }, [isCheck])

  const rNavigateTo = (url: string) => {
    window.location.href = url
  }

  const clickReading = () => {
    const check = !isCheck
    setIsCheck(check)
    // if (type === 1) {
    //   plantXWLog('click_CUBJp8ye', { sgroupid: uuid, task_status: check })
    // } else {
    //   plantXWLog('click_fA5fPkcF', { sgroupid: uuid, task_status: check })
    // }
  }

  return (
    <div className={styles['reading-rule']}>
      <div
        className={`${styles['checkek_box']} ${
          isCheck ? styles['checkek_box-check'] : styles['checkek_box-uncheck']
        }`}
        onClick={clickReading}
      />
      <div className={styles['all-text']}>
        <span className={`${styles['text']} ${styles['text-agree']}`} onClick={clickReading}>
          我已阅读并同意
        </span>
        <span
          className={`${styles['text']} ${styles['text-rules']}`}
          onClick={() => {
            rNavigateTo('https://www.xiwang.com/page/mall/touch-protocol#/register')
          }}
        >
          《希望学用户协议》,
        </span>
        <span
          className={`${styles['text']} ${styles['text-rules']}`}
          onClick={() => {
            rNavigateTo('https://www.xiwang.com/page/mall/touch-protocol#/privacy')
          }}
        >
          《用户个人信息保护政策》
        </span>
        <span
          className={`${styles['text']} ${styles['text-rules']}`}
          onClick={() => {
            rNavigateTo('https://www.xiwang.com/page/mall/touch-protocol#/children')
          }}
        >
          《儿童个人保护政策》
        </span>
      </div>
    </div>
  )
}
